<template>
  <div class="header">
    <div class="content-wrapper">
      <div class="avatar">
        <img :src="shop.avatar">
      </div>
      <div class="content">
        <div class="title">
          <!-- <span class="brand"></span> -->
          <span class="name">{{shop.name}}</span>
        </div>
        <!-- <div class="description">
          {{shop.description}}/{{shop.deliveryTime}}分钟送达
        </div>
        <div v-if="shop.supports" class="support">
          <span class="icon" :class="classMap[shop.supports[0].type]"></span>
          <span class="text">{{shop.supports[0].description}}</span>
        </div> -->
      </div>
      <!-- <div v-if="shop.supports" class="supports-count" @click="showDetail">
        <span class="count">{{shop.supports.length}}个</span>
        <i class="icon iconfont icon-zuoyoujiantou"></i>
      </div> -->
    </div>
    <div class="bulletin-wrapper" @click="showDetail">
      <!-- <span class="bulletin-title"></span> -->
      <span class="bulletin-text">{{shop.description}}</span>
      <!-- <i class="icon iconfont icon-zuoyoujiantou"></i> -->
    </div>
    <div class="background">
      <img :src="shop.avatar" alt="" class="" width="100%" height="100%">
    </div>
    <transition name="fade">
    <div v-show="detailShow" class="detail" @click="hideDetail" transition="fade">
      <div class="detail-wrapper clearFix">
        <div class="detail-main">
          <h1 class="name">{{shop.name}}</h1>
          <!-- <div class="star-wrapper">
            <star :size="48" :score="shop.score"></star>
          </div> -->
          <!-- <div class="title">
            <div class="line"></div>
            <div class="text">优惠信息</div>
            <div class="line"></div>
          </div> -->
          <!-- <ul v-if="shop.supports" class="supports">
            <li class="support-item" v-for="(item, index) in shop.supports" :key='index'>
              <span class="icon" :class="classMap[shop.supports[index].type]"></span>
              <span class="text">{{shop.supports[index].description}}</span>
            </li>
          </ul> -->
          <div class="title">
            <div class="line"></div>
            <div class="text">商家公告</div>
            <div class="line"></div>
          </div>
          <div class="bulletin">
            <p class="content">{{shop.description}}</p>
          </div>
        </div>
      </div>
      <div class="detail-close" @click="hideDetail">
        <i class="iconfont icon-cha"></i>
      </div>
    </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'VHeader',
  props: {
    shop: {}
  },
  data() {
    return {
      detailShow: false
      // shop: {
      //   avatar: 'static/img/seller_avatar.jpg',
      //   name: '粥品相仿',
      //   description:
      //     '粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。'
      // }
    }
  },
  methods: {
    showDetail() {
      this.detailShow = true
    },
    hideDetail() {
      this.detailShow = false
    }
  },
  created() {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  },
  components: {}
}
</script>

<style lang="less" scoped>
@import 'header.less';
</style>
